/**
 * @Author: ls-mac
 * @Date:   2018-09-27T13:55:24+08:00
 * @Last modified by:   ls-mac
 * @Last modified time: 2020-07-16 15:23:40
 */

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { setAuthority } from 'utils/authority';
import moment from 'moment';
import transparentP from 'assets/transparent.png';

import {
  Row,
  Col,
  Card,
  Checkbox,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Table,
  Modal,
  message,
  Badge,
  Tabs,
  Divider,
  notification,
} from 'antd';
import styles from './login.less';

@connect(({ login, loading }) => ({
  login,
  loading: loading.models.login,
}))
@Form.create()
export default class Login extends PureComponent {
  state = {};

  componentDidMount() {}

  accountSubmit = () => {
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'login/login',
          payload: {
            userType: '2',
            userName: values.userName,
            password: values.password,
          },
          callback: res => {
            if (res.success) {
              message.success('登录成功');
              const {
                currentUser: { sessionId },
                permissionList,
              } = res.data;
              localStorage.setItem('authorization-token', sessionId);
              sessionStorage.setItem('login-resources', permissionList);
              dispatch(routerRedux.push('/welcome'));
            } else {
              message.info('用户名或密码错误！');
            }
          },
        });
      }
    });
  };

  render() {
    const { TabPane } = Tabs;
    const { form, loading } = this.props;
    const { getFieldDecorator } = form;
    const FormItem = Form.Item;

    return (
      <Card
        className={styles.bodyContainer}
        bordered={false}
        style={{ height: '100%', width: '100%', background: '#3A7BDA' }}
      >
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: '8%',
          }}
        >
          <Tabs
            defaultActiveKey="1"
            onChange={this.callback}
            style={{
              background: 'white',
              width: '480px',
              textAlign: 'center',
              borderRadius: '6px',
              padding: '14px 30px 0 30px',
            }}
          >
            <TabPane tab="登录" key="1">
              <Form>
                <FormItem>
                  {getFieldDecorator('userName', {
                    rules: [{ required: true, message: '请输用户名!' }],
                  })(
                    <Input
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      style={{ width: '350px', height: '48px', margin: '20px 0 8px 0' }}
                      placeholder="用户名"
                    />
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: '请输入密码！' }],
                  })(
                    <Input
                      prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      style={{ width: '350px', height: '48px', marginBottom: '8px' }}
                      type="password"
                      placeholder="密码"
                    />
                  )}
                </FormItem>

                <FormItem style={{ marginTop: '30px', marginBottom: '27px' }}>
                  <Button
                    type="primary"
                    onClick={() => {
                      this.accountSubmit();
                    }}
                    style={{ width: '350px', height: '48px', fontSize: '16px' }}
                    loading={loading}
                  >
                    登录
                  </Button>
                </FormItem>
              </Form>
            </TabPane>
          </Tabs>
          <div
            style={{
              position: 'fixed',
              bottom: '60px',
              color: '#fff',
              width: '100%',
              height: '100px',
              padding: '20px',
              textAlign: 'center',
            }}
          >
            <p style={{ marginBottom: ' 2px' }}>Copyright © 2020   上海郦森健康管理咨询有限公司</p>
            {/*
							<p style={{ marginBottom: ' 2px' }}>
              邮编：401258 电话：023-68983482 68873311 传真：023-68873189
            </p>
						*/}
            <p style={{ marginBottom: ' 2px' }}>
              <img style={{ width: '18px', marginBottom: '2px' }} src={transparentP} />
              工信部备案号：
              <a href="http://www.beian.miit.gov.cn/" target="_blank" style={{ color: '#ccc' }}>
                沪ICP备19028119号
              </a>
            </p>
          </div>
        </div>
      </Card>
    );
  }
}
